<template>
  <div class="container" style="height: 100%">

    <div style="padding:20px;">
        <el-table ref="table" class="roomTable" :data="tableData">
          <el-table-column label="" type="index"></el-table-column>
          <el-table-column label="考核名称" prop="name"></el-table-column>
          <el-table-column label="被考核人" prop="assesseeName"></el-table-column>
          <el-table-column label="考核时间" width="280">
            <template slot-scope="{row}">{{row['startDate']}} - {{row['endDate']}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-link v-if="row.isAssessment == 0" type="primary" :underline="false" @click="handleModify(row,false)">开始考核</el-link>
              <el-link v-if="row.isAssessment == 1" type="primary" :underline="false" @click="handleModify(row,true)">查看</el-link>
            </template>
          </el-table-column>
        </el-table>
    </div>

    <div class="page-div">
      <el-pagination layout="prev, pager, next,jumper,sizes" :current-page="pageObj.page" :page-size="pageObj.pageSize"
                     :total="pageObj.total" @current-change="currentPageChange" @size-change="sizeChange"
                     :page-sizes='pageObj.pageSizes'></el-pagination>
    </div>

    <el-drawer width="auto" title="考核信息" size="100%" :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="dialog" @close="formData={}">
      <el-form v-loading="loading" :model="formData" :disabled="showType">
        <div class="d-flex">
          <el-form-item label="考核名称:" label-width="90px">{{formData.name}}</el-form-item>
          <el-form-item label="被考核人:" label-width="90px">{{formData.assesseeName}}</el-form-item>
        </div>


        <el-table :data="formData.indicatorList" :span-method="objectSpanMethod" :show-summary="true" :summary-method="getSummaries">
          <el-table-column label="指标类型" prop="parentName" width="150"></el-table-column>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="指标名称" prop="name"></el-table-column>
          <el-table-column label="权重" prop="proportion" width="120"></el-table-column>
          <el-table-column label="工作目标" prop="jobTarget"></el-table-column>
          <el-table-column label="评分标准" prop="scoreStandard"></el-table-column>
          <el-table-column label="实际完成值" prop="actualCompletion"></el-table-column>
          <el-table-column label="得分" prop="score">
            <template slot-scope="{row}">
              <el-input-number :min="row.parentName=='加扣分项' ? 0-row.proportion : 0" :max="row.proportion" v-model="row.score" style="width: 120px"></el-input-number>
            </template>
          </el-table-column>
        </el-table>


      </el-form>
      <div v-if="!showType" style="padding: 20px 0;text-align: center">
        <el-button @click="dialog=false">取消</el-button>
        <el-button type="primary" style="margin-left: 40px;" @click="handleSubmitConfirm">确定</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>

import { listMixin } from '@/mixin'
import { getAssessmentList, getAssessmentInfo, addAssessmentScore } from '@/api/assessment'

export default {
  name: 'index',
  mixins: [listMixin],
  data() {
    return {
      loading: false,
      pageObj: { page: 1, pageSize: 10, total: 0, type: 2 },
      dialog: false,
      showType: false,
      tableData: [],
      formData: {},
    }
  },
  computed:{
    total(){
      let score=0
      this.formData.indicatorList.map(item=>{
        score+=item.score
      })
    }
  },
  methods: {
    loadData() {
      return getAssessmentList(this.pageObj).then(res => {
        let { data, total } = res
        this.tableData = data
        this.pageObj.total = total
        // this.handleModify(data[0])
      })
    },

    currentPageChange(val) {
      this.pageObj.page = val
      this.loadData()
    },
    sizeChange(val) {
      this.pageObj.page = 1
      this.pageObj.pageSize = val
      this.loadData()
    },

    handleModify(item, show) {
      this.showType = show
      getAssessmentInfo(item.assessmentId).then(res => {
        if (res.code !== 10000) {return}
        this.formData = res.data
        this.dialog = true
      })
    },
    handleSubmitConfirm() {
      this.$confirm('提交后将不可修改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleSubmit()
      }).catch(() => {})
    },
    handleSubmit() {
      let data = []
      this.formData.indicatorList.map(item => {
        data.push({
          'assessmentId': this.formData.assessmentId,
          'indicatorProportId': item.indicatorProportId,
          'score': item.score
        })
      })
      this.loading = true
      addAssessmentScore(data).then(res => {
        if (res.code !== 10000) {
          this.loading = false
          return
        }
        this.$message.success(res.msg)
        this.loadData()
        this.dialog = false
        this.loading = false
      })
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      let num = 0
      if (columnIndex === 0) {
        for (let i = 0; i < this.formData.indicatorList.length; i++) {
          if (row.parentName === this.formData.indicatorList[i].parentName) {
            num++
          }
        }
        if (num === 1) {
          return { rowspan: num, colspan: 1 }
        } else if (num > 1) {
          if (this.formData.indicatorList[rowIndex - 1] && this.formData.indicatorList[rowIndex].parentName === this.formData.indicatorList[rowIndex - 1].parentName) {
            return { rowspan: 0, colspan: 0 }
          } else {
            return { rowspan: num, colspan: 1 }
          }
        }
      }
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      sums[0] = '总价';

      columns.forEach((column, index) => {
        if (index === 7 || index === 3 ) {
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
        }
      });

      return sums;
    }
  },
  mounted() {
    this.loadDataProxy()
  }
}
</script>

